.co-overlay {
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  cursor: default;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: $zindex-modal;
}

.modal-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 0;
  position: relative;
  @include scroll-shadows-vertical;
  -webkit-overflow-scrolling: touch;
}

.modal-body-border {
  border-top: 1px solid $pf-color-black-300;
}

.modal-body-content {
  height: 100%;
}

.modal-body-inner-shadow-covers {
  min-height: 100%;
  // --pf-c-modal-box--Padding* will not render correctly here so applying pf4 spacer values
  padding: 0 var(--pf-global--spacer--xl) var(--pf-global--spacer--xl);
  @include scroll-shadows-vertical-covers;
  width: 100%;

  // so that input and textarea don't mask the inner scroll shadows
  input, textarea {
    &.pf-c-form-control {
      --pf-c-form-control--BackgroundColor: transparent;

      max-width: 100%;

      &[disabled],
      &[readonly] {
        --pf-c-form-control--BackgroundColor: rgba(128, 128, 128, 0.15);
      }
    }
  }
}

.modal-content {
  background-color: $pf-color-white;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,0.2);
  @include box-shadow(0 3px 9px rgba(0, 0, 0, .5));
  display: flex;
  flex-direction: column;
  height: 100%;
  // Remove focus outline from opened modal
  outline: 0;
  position: relative;
  @media(min-width: $pf-global--breakpoint--md) {
    // Desktop only responsive max-height allows modal to adjust to content height and enable scroll shadows if needed.
    max-height: calc(100vh - 60px);
    // Dropdown workaround:  use when modal content can expand (taints, tolerations)
    &--accommodate-dropdown .modal-body-inner-shadow-covers {
      padding-bottom: 100px;
    }
    // Dropdown workaround: use when modal content is short and cannot expand
    &--no-inner-scroll {
      .modal-body {
        overflow-y: visible !important;
      }
      .modal-body-content {
        background-color: var(--pf-global--BackgroundColor--100);
      }
      .modal-body-inner-shadow-covers {
        padding-bottom: var(--pf-global--spacer--lg);
      }
      .modal-footer {
        padding-top: 0;
      }
    }
  }
}

// setting a height on modal-dialog enables flex child height to shrink and become scrollable
.modal-dialog {
  margin: 10px;
  margin-bottom: 0;
  max-width: calc(100% - var(--pf-global--spacer--xl));
  outline: 0;
  position: relative;
  width: 100%;
  @media (min-width: $pf-global--breakpoint--md) {
    margin: 30px auto;
    &:not(.modal-lg) {
      max-width: 600px;
    }
  }
  @media (min-width: $pf-global--breakpoint--xl) {
    &.modal-lg {
      // Manually set to match --pf-c-modal-box--m-lg--lg--MaxWidth because the PF variable is scoped to .pf-c-modal-box
      max-width: 70rem;
    }
  }

  @media(max-width: $screen-xs-max) and (orientation: portrait) {
    height: calc(100% - 20px); // subtract height margin-top 10px + margin-bottom 10px
  }
  @media(max-width: $screen-xs-max) and (orientation: landscape) {
    height: calc(100% - 60px); // At desktop, subtract margin-top 30px + margin-bottom 30px OR in the case of mobile landscape orientation, subtract the height of ios url control bar, since its height is not taken into account when the viewport height is calculated on initial page load. This causes the modal to extend below the viewport and hide modal-footer buttons.
  }
}

.modal-footer {
  background-color: var(--pf-global--BackgroundColor--100);
  margin-top: 0;
  padding: var(--pf-global--spacer--md) var(--pf-global--spacer--xl) var(--pf-global--spacer--xl) var(--pf-global--spacer--xl);
}

.modal-header {
  background-color:var(--pf-global--BackgroundColor--100);
  padding: var(--pf-global--spacer--xl) var(--pf-global--spacer--xl) var(--pf-global--spacer--lg);
}

.modal__inline-resource-link {
  margin: 0;
}

.toleration-modal__field, .taint-modal__field  {
  padding-right: 0;
}

.toleration-modal__field, .taint-modal__input {
  margin-bottom: 5px;
  @media(max-width: $screen-sm-max) {
    margin-bottom: 10px;
  }
}

.toleration-modal__heading, .taint-modal__heading {
  margin-bottom: 5px;
}

.toleration-modal__row, .taint-modal__row {
  margin-bottom: 15px;
  @media(max-width: $screen-sm-max) {
    margin-bottom: 24px;
  }
}
